<template>
  <div class="container">
<!--    分割线-->
    <el-tabs v-model="activeName" @tab-click="handleClick" style="padding-left: 10px;font-size: 25px;">
      <el-tab-pane label="基本信息" name="first" style="font-size: 20px;padding-left: 25px">基本信息</el-tab-pane>
      <el-tab-pane label="账号管理" name="second" style="font-size: 20px;padding-left: 25px">账号管理</el-tab-pane>
    </el-tabs>
<!--    基本信息-->
    <div class="message">
      <div class="block">
        <span class="title"></span>
        <el-avatar shape="square" :size="150" :fit="fit" :src="url"></el-avatar>
        <el-row style="padding-top: 5px;padding-left:10px;">
          <el-button icon="el-icon-edit" style="font-size: 8px;">编辑头像</el-button>
        </el-row>
      </div>
<!--   基本信息-->
      <div class="user">
        <el-descriptions  :column="1" style="float: right;font-size: 15px;">
          <el-descriptions-item label="用户名">admin</el-descriptions-item>
          <el-descriptions-item label="性别">
            <el-radio v-model="radio" label="1">男</el-radio>
            <el-radio v-model="radio" label="2">女</el-radio>
          </el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="绑定邮箱">123456789@qq.com</el-descriptions-item>
          <el-descriptions-item label="VIP">您尚未开通VIP</el-descriptions-item>
          <el-descriptions-item label="联系地址">江西省南昌市南昌县丽湖大道108号</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
<!--    认证信息-->
<!--    <div class="myself">
      <el-descriptions title="个人认证信息">
        <el-descriptions-item label="用户名">admin</el-descriptions-item>
        <el-descriptions-item label="绑定手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="VIP">您尚未开通VIP</el-descriptions-item>
        <el-descriptions-item label="居住地">江西省南昌市</el-descriptions-item>
        <el-descriptions-item label="联系地址">江西省南昌市南昌县丽湖大道108号</el-descriptions-item>
      </el-descriptions>
    </div>-->
<!--    选择退出或修改个人信息-->
    <el-popconfirm title="您确定要修改个人信息吗？" style="float: right;padding-top: 20px;padding-right: 270px;">
      <el-button slot="reference">修改</el-button>
    </el-popconfirm>
  </div>
</template>

<script>
export default {
  name: "Personal",
  data () {
    return {
      //头像的相关信息
      fit: 'fill',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      //头部标签
      activeName: 'first',
    //  行别的单选框
      radio: '1',
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  }
}
</script>

<style scoped>
.container{
  /*text-align: center;*/
  background-color: #fff;
  /*border-radius: 20px;*/
  width: 800px;
  height: 600px;
  /*margin-top: 20px;*/
  margin: auto;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
}
.block{
  float: left;
  padding-top:20px;
  padding-left: 40px;
}

.user{
  /*position: absolute;*/
  float: right;
  /*font-size: 30px;*/
  width: 430px;
  height: 230px;
  padding-right: 110px;
  padding-top: 20px;
}
/*.myself{
  width: 500px;
  height: 200px;
  padding-top: 200px;
}*/
</style>
